<template>
  <div class="picturePosition">
    <informationCard title="上报第三方服务机构总数" :data="thirdPartyInstitution.thirdPartyInstitutionTotal" unit="家" :imgUrl="icon1" :backUrl="back1"/>
    <informationCard title="上报合同总数" :data="thirdPartyInstitution.reportCount" unit="个" :imgUrl="icon2" :backUrl="back2"/>
    <informationCard title="供应商为相同机构的合同占比" :data="thirdPartyInstitution.reportRatio" unit="%" :imgUrl="icon3" :backUrl="back3"/>
    <informationCard title="供应商为境外的合同占比" :data="thirdPartyInstitution.overseasContractRatio" unit="%" :imgUrl="icon4" :backUrl="back4"/>
  </div>
</template>

<script setup>
  import informationCard from '../components/information-card.vue';
  import icon1 from '../components/icons/ThirdParty/icon1.svg';
  import back1 from '../components/icons/ThirdParty/back1.svg';
  import icon2 from '../components/icons/ThirdParty/icon2.svg';
  import back2 from '../components/icons/ThirdParty/back2.svg';
  import icon3 from '../components/icons/ThirdParty/icon3.svg';
  import back3 from '../components/icons/ThirdParty/back3.svg';
  import icon4 from '../components/icons/ThirdParty/icon4.svg';
  import back4 from '../components/icons/ThirdParty/back4.svg';
  import { onMounted, toRefs, ref } from 'vue';

  const props = defineProps({
    sourceData:{
      type: Object,
      default: () => ({})
    }
  })

  const { sourceData } = toRefs(props);
  const thirdPartyInstitution = ref({
    thirdPartyInstitutionTotal: '-',
    reportCount: '-',
    reportRatio: '-',
    overseasContractRatio: '-',
  });

  onMounted(() => {
    if(sourceData.value && Object.keys(sourceData.value).length > 0) {
      thirdPartyInstitution.value = sourceData.value;
      thirdPartyInstitution.value.contractAmount = Math.round(thirdPartyInstitution.value.contractAmount / 10000);   
    }
  })
  
</script>

<style lang="less" scoped>
.picturePosition {
  position: relative;
  width: 100%;
  display: flex;
  flex: 1;
  justify-content: space-around;
}
</style>
